<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="导航搜索">
						<el-input v-model="state.param.categoryName" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getCategoryList">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="addCategory('add', {})">
							<el-icon>
								<ele-Plus />
							</el-icon> 新增导航
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData.data" row-key="id" style="width: 100%">
						<el-table-column type="selection" width="30" />
						<el-table-column label="ID" width="120">
							<template #default="scope">
								<span>{{ scope.row.data.categoryId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="协议名称" width="420" align="left">
							<template #default="scope">
								<span>{{ scope.row.data.categoryName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="分类图标">
							<template #default="scope">
								<div style="display: flex;justify-content:center;align-items: center;">
									<el-image style="width:32px;height: 32px;" :src="scope.row.data.categoryUrl"
										fit="cover" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="排序" >
							<template #default="scope">
								<span>{{ scope.row.data.sortNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态" >
							<template #default="scope">
								<el-switch @Click="changeStatusFun(scope.row)" :model-value="scope.row.data.isEnable" :active-value=1 :inactive-value=0 />
							</template>
						</el-table-column>
						<el-table-column label="来源" >
							<template #default="scope">
								<span>{{ scope.row.data.sourceName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建人 " >
							<template #default="scope">
								<span>{{ scope.row.data.createdBy }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" show-overflow-tooltip>
							<template #default="scope">
								<el-tooltip effect="dark" :content="formatDate(new Date(scope.row.data.createdTime), 'YYYY-mm-dd HH:MM:SS')" placement="top-start">
									<span>{{ formatDate(new Date(scope.row.data.createdTime), 'YYYY-mm-dd') }}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="100">
							<template #default="scope">
								<el-link class="font16" :underline="false" type="primary" @click="addCategory('edit',scope.row.data)">编辑</el-link>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<el-link class="font16" :underline="false" type="primary" @click="deleteHandle(scope.row.data)">删除</el-link>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
				</section>
			</el-card>
			<addDialog ref="addDialogRef" @refresh="getCategoryList()" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatDate } from '/@/utils/formatTime';
import { productCategoryList, productCategoryUpsert, categoryDelete } from "/@/api/commodity";
const addDialog = defineAsyncComponent(() => import('/@/views/system/agreementManagement/classification/components/addDialog.vue'));
// 定义变量内容
const addDialogRef = ref();
const state = reactive({
	param: {
		isEnable: null,
		categoryName: '',
	},
	storeCategoryList:[] as Array<any>,
	shopCategoryList:[] as Array<any>,
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});


// 打开新增编辑分类弹窗
const addCategory = (type: string, row ?: Object) => {
	addDialogRef.value.openDialog(type, JSON.parse(JSON.stringify(row)));
};

const changeStatusFun = (obj: any) => {
	ElMessageBox.confirm(`是否修改该分类状态`, "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true
    }).then(async () => {
		let params = {
			categoryId: obj.id,
			isEnable: obj.data.isEnable == 1 ? 0 : 1,
		}
		const { method } = await productCategoryUpsert(params);
		if(method == 'success'){
			ElMessage.success('修改成功');
			getCategoryList();
		}
    });
};



const deleteHandle = (row: any) => {
	ElMessageBox.confirm( '确定删除该分类?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then( async () => {
		let results = await categoryDelete(row.categoryId);
		ElMessage.success('删除成功');
		getCategoryList();
    }).catch(() => {
    })
}

// 获取分类  
const getCategoryList = async () => {
	state.tableData.loading = true
	const { results } = await productCategoryList({ platformType: 2,isEnable:state.param.isEnable,categoryName:state.param.categoryName });
	state.tableData.data = results;
	traverseData(state.tableData.data);
	state.tableData.loading = false
}

const traverseData = (data:any) => {  
    for (let i = 0; i < data.length; i++) {  
        delete data[i].hasChildren; // 移除name属性  
        if (data[i].children && data[i].children.length > 0) {  
            traverseData(data[i].children); // 递归遍历子对象并修改它们的id、name和text  
        }  
    }  
}  

// 页面加载时
onMounted(() => {
	getCategoryList();
});

</script>

<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
// // 隐藏expand 箭头
// :deep(.el-table__expand-column){
// 	visibility: hidden;
// }
</style>
